fix(web): scroll hint via IntersectionObserver + icons for new projects by JustAGhosT · Pull Request #214 · phoenixvc/phoenix-website

JustAGhosT · 2026-06-22T21:13:11Z

Follow-ups to the live site.

1. "Scroll to Explore" hint shows at the wrong time

It was driven by window.scrollY, which on this layout isn't a reliable signal — the hint stayed visible far down the page (you reported it only disappearing around the last section). Now a 1px sentinel sits at the top of the hero and an IntersectionObserver toggles the hint: it hides the moment the top leaves the viewport (any scroll) and returns when you scroll back up — independent of the scroll mechanism.

2. New projects had no detail-page icon

Sluice/Docket/ConvoLens/OmniPost were falling back to the generic Layers icon. Gave each a fitting lucide icon: Sluice→Waypoints, Docket→Receipt, ConvoLens→MessagesSquare, OmniPost→Share2.

Notes

ESLint-clean; the IntersectionObserver code is type-clean. The new icons carry the same pre-existing @types/react-skew TS2786 type-noise as the 10 existing project icons (repo ships with this; build doesn't typecheck).

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

New Features
- Added icon support for additional projects in the portfolio section.
Improvements
- Enhanced "Scroll to Explore" hint detection mechanism for improved reliability.

…rojects The "Scroll to Explore" hint was driven by window.scrollY, which on this layout left it visible far down the page (only disappearing near the last section). Drive its visibility from an IntersectionObserver on a 1px sentinel at the top of the hero instead — it now hides the moment you scroll and returns at the top, regardless of how the page scrolls. Also give the newly-added portfolio projects detail-page icons (they were falling back to the generic Layers icon): Sluice→Waypoints, Docket→Receipt, ConvoLens→MessagesSquare, OmniPost→Share2.

coderabbitai · 2026-06-22T21:13:34Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 70cbeaee-75c1-405d-b508-460ef050e5b8

📥 Commits

Reviewing files that changed from the base of the PR and between 7cbfef5 and 2f3098c.

📒 Files selected for processing (3)

apps/web/src/features/hero/components/Hero/Hero.tsx
apps/web/src/features/hero/components/Hero/hero.module.css
apps/web/src/features/portfolio/ProjectDetail.tsx

Disabled knowledge base sources:

Linear integration is disabled

You can enable these sources in your CodeRabbit configuration.

📝 Walkthrough

Walkthrough

The Hero component's "Scroll to Explore" hint is refactored to use an IntersectionObserver on a new 1px sentinel <div> at the top of the section, replacing the previous window.scrollY check. The window scroll handler is kept only for showReturnToStars. A .scrollSentinel CSS class is added. Separately, four new project icon mappings are added to ProjectDetail.

Changes

Hero Scroll Indicator Refactor

Layer / File(s)	Summary
Sentinel CSS, ref, markup, and IntersectionObserver logic `apps/web/src/features/hero/components/Hero/hero.module.css`, `apps/web/src/features/hero/components/Hero/Hero.tsx`	Adds `.scrollSentinel` (1px, full-width, non-interactive), a `topSentinelRef` ref, the sentinel `<div>` in hero markup, and an `IntersectionObserver` effect that sets `showScrollIndicator`; the existing scroll handler is trimmed to only update `showReturnToStars`.

ProjectDetail Icon Additions

Layer / File(s)	Summary
New project icon mappings `apps/web/src/features/portfolio/ProjectDetail.tsx`	Adds `Waypoints`, `Receipt`, `MessagesSquare`, and `Share2` to the lucide-react imports and maps them to `sluice`, `docket`, `convolens`, and `omnipost` in the local `projectIcons` dictionary.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐇 A pixel stands guard at the top of the page,
Watching the viewport with IntersectionObserver sage.
No more polling the scroll with a Y,
The sentinel blinks as the hero scrolls by.
And four new icons take their rightful place —
A rabbit approves, with a smile on its face! 🌟

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/scroll-hint-intersection

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 2f3098cac4

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-06-22T21:15:16Z

+.scrollSentinel {
+  width: 100%;
+  height: 1px;
+  pointer-events: none;


Keep the scroll sentinel out of flex flow

This sentinel is inserted as a normal child of .heroSection, which is a centered flex container, so on the homepage it participates in the row layout alongside .heroContainer: the full-width sentinel can shrink/shift the hero content and, because align-items: center applies, the 1px target is vertically centered rather than at the top. In that state the IntersectionObserver keeps the scroll hint visible until the centered sentinel leaves the viewport instead of hiding on any scroll; position the sentinel absolutely at top: 0 (or otherwise remove it from flex flow).

Useful? React with 👍 / 👎.

JustAGhosT merged commit 6aa0eb7 into main Jun 22, 2026
1 of 2 checks passed

JustAGhosT deleted the fix/scroll-hint-intersection branch June 22, 2026 21:13

chatgpt-codex-connector Bot reviewed Jun 22, 2026

View reviewed changes

This was referenced Jun 22, 2026

feat(web): bespoke per-project portfolio logos + single-source listing #216

Merged

fix(web): re-centre minimized hero pill #218

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(web): scroll hint via IntersectionObserver + icons for new projects#214

fix(web): scroll hint via IntersectionObserver + icons for new projects#214
JustAGhosT merged 1 commit into
mainfrom
fix/scroll-hint-intersection

JustAGhosT commented Jun 22, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

Uh oh!

coderabbitai Bot commented Jun 22, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

chatgpt-codex-connector Bot Jun 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

JustAGhosT commented Jun 22, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

1. "Scroll to Explore" hint shows at the wrong time

2. New projects had no detail-page icon

Notes

Summary by CodeRabbit

Release Notes

Uh oh!

Uh oh!

coderabbitai Bot commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jun 22, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

JustAGhosT commented Jun 22, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 22, 2026 •

edited

Loading